<template>
  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab },{'report_layout':$route.path.includes('/dashboard-')||$route.path.includes('/home')||$route.path.includes('/bot-')||$route.path.includes('/scorecard-')}]">
    <template v-if="$route.meta.isTab">
      <el-dropdown class="aui-content--tabs-tools">
        <i class="el-icon-arrow-down"></i>
        <el-dropdown-menu slot="dropdown"
                          :show-timeout="0">
          <el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
<!--      TODO this not use tabs, should separate.-->
      <el-tabs v-model="$store.state.contentTabsActiveName"
               @tab-click="tabSelectedHandle"
               @tab-remove="tabRemoveHandle"
               :class="(pathName==='/Widgets'||pathName==='/CrossTenantWidget'||pathName==='/Reports'||pathName==='/Dashboards' ||pathName==='/CrossTenantDashboard'||pathName==='/Slicer'||pathName==='/Bots'||pathName==='/CrossTenantBots'||pathName==='/Datasets'||pathName==='/CrossTenantDataset'||pathName==='/Scorecards'||pathName==='/CrossTenantSlicer')?'noscroll': ''"
               class="content-bar-module">
        <!-- pathName==='/home'|| 09/28 Leon hide-->
        <el-tab-pane v-for="item in $store.state.contentTabs"
                     :key="item.menuId"
                     :name="item.menuId"
                     :label="(item.title || '').replace('report-', '').replace('dataset-', '')"
                     :closable="item.name !== 'home'"
                     :class="{ 'is-iframe': tabIsIframe(item.iframeURL)}">
          <template v-if="item.name === 'home'">
            <svg slot="label"
                 class="icon-svg aui-content--tabs-icon-nav"
                 aria-hidden="true">
              <use xlink:href="#icon-home"></use>
            </svg>
          </template>
          <iframe v-if="tabIsIframe(item.iframeURL)"
                  :src="item.iframeURL"
                  width="100%"
                  height="100%"
                  frameborder="0"
                  scrolling="yes"></iframe>

          <keep-alive v-else
                      >
            <div v-if="showFullContent"
                 style="position: fixed; width: 100vw; height: 100vh; z-index: 2012; top: 0; left: 0; background: #ffffff;padding:15px;">
              <router-view v-if="item.menuId === $store.state.contentTabsActiveName" />
            </div>
            <template v-else>
              <router-view v-if="item.menuId === $store.state.contentTabsActiveName" />
            </template>
          </keep-alive>

        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-else>
      <keep-alive>
        <router-view />
      </keep-alive>
    </template>
  </main>
</template>

<script>
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {
      showFullContent: false
    }
  },
  computed: {
    thisPageName () {
      return this.$store.state.contentTabsActiveName
    },
    pathName () {
      return this.$route.path
    },
    currentTheme () {
      return this.$store.state.app.theme
    }
  },
 
 

  methods: {
    tabIsIframe (url) {
      return isURL(url)
    },
    tabSelectedHandle (tab) {
      if (this.$store.state.user.regSource === '3' && tab.name === 'home') {
        tab = this.$store.state.contentTabs.filter(item => item.name === 'mspbots-reports-index')[0]
      } else {
        tab = this.$store.state.contentTabs.filter(item => item.menuId === tab.name)[0]
      }
      if (tab) {
        if (tab.name === 'home') {
          this.$router.push({
            'name': tab.name,
            params: { ...tab.params },
            query: { ...tab.query }
          })
        } else {
          this.$router.push({
            'path': tab.path,
            params: { ...tab.params },
            query: { ...tab.query }
          })
        }
      }
    },
    refresh () {
      this.$store.state.contentIsNeedRefresh = true
      this.$store.state.app.contentIsNeedRefreshCache = true
      this.$nextTick(() => {
        this.$store.state.contentIsNeedRefresh = false
      })
    },
    tabRemoveHandle (tabName) {
      let _this = this
      if (this.$store.state.user.regSource === '3' && tabName === 'mspbots-reports-index') {
        return false
      } else {
        if (tabName === 'home') {
          return false
        }
      }
      try {
        let res = this.$store.state.contentTabs.find(item => item.menuId === tabName)
        if (res && res.path.includes('/bot') && this.$store.state.bot.botInfoChangeStatus) {
          this.$confirm('Are you sure you want to close without saving?', 'The changes you made will be lost', {
            confirmButtonText: "Don't Save",
            cancelButtonText: 'Save',
            type: 'warning'
          }).then(() => {
            _this.$store.commit('BOTCONTENTCHANGE', false)
            _this.$store.commit('BOTFORMFLAG', false)
            _this.deleteTabsName(tabName)
          }).catch(() => {
            _this.$root.eventBus.$emit('bus')
            _this.$root.eventBus.$on('delete', () => {
              _this.deleteTabsName(tabName)
            })
          })

        } else {
          _this.deleteTabsName(tabName)
        }
      } catch (error) {

      }
    },
    deleteTabsName (tabName) {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.menuId !== tabName)
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
        return false
      }
      if (tabName === this.$store.state.contentTabsActiveName) {
        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
        if (tab.name === 'home') {
          this.$router.push({
            'name': tab.name,
            params: { ...tab.params },
            query: { ...tab.query }
          })
        } else {
          // this.$store.state.contentTabs.splice(this.$store.state.contentTabs.length, 1)
          this.$router.push({
            'path': tab.path,
            params: { ...tab.params },
            query: { ...tab.query }
          })
        }
      }
    },
    tabsCloseOtherHandle () {
      let _this = this
      let currTabs = []
      this.$store.state.contentTabs.forEach(element => {
        if (element.menuId === 'home' || element.menuId === this.$store.state.contentTabsActiveName) { currTabs.push(element) }
        if (element.path.includes('/bot') && this.$store.state.bot.botInfoChangeStatus) {
          this.$confirm('Confirm Discard Changes?', 'Prompt', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
            _this.$store.commit('BOTCONTENTCHANGE', false)
            _this.$store.commit('BOTFORMFLAG', false)
          }).catch(() => {
            currTabs.push(element)
          })
        }
      })
      this.$store.state.contentTabs = currTabs
    },
    tabsCloseAllHandle () {
      if (this.$store.state.user.regSource === '3') {
        return false
      }
      let _this = this
      let currTabs = []
      this.$store.state.contentTabs.forEach(element => {
        if (element.menuId === 'home') { currTabs.push(element) }
        if (element.path.includes('/bot') && this.$store.state.bot.botInfoChangeStatus) {
          this.$confirm('Confirm Discard Changes?', 'Prompt', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
            _this.$store.commit('BOTCONTENTCHANGE', false)
            _this.$store.commit('BOTFORMFLAG', false)
          }).catch(() => {
            currTabs.push(element)
          })
        }
      })
      // this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
      this.$store.state.contentTabs = currTabs
      this.$router.push({ name: 'home' })
    },
  
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .content-bar-module>.el-tabs__content {
    padding: 16px!important;
  }
  .report_layout ::v-deep  .content-bar-module>.el-tabs__content {
  padding: 6px!important;
}
.noscroll {
  ::v-deep .el-tabs__content {
    overflow: hidden !important;
    .el-tab-pane {
      overflow: hidden;
    }
  }
}
::v-deep .e-ccsearch-icon {
  padding: 0 !important;
}
.el-tab-pane {
  position: relative;
}


</style>
